<template>
    <div class="page">
        <template>
             <!-- 筛选部分 -->
            <div class="searchVue flex_between">
                <div class="flex">
                    <el-select v-model="status" placeholder="网络状态" style="width: 200px;" @change="reStart" clearable>
                        <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-input placeholder="搜索微信名称" v-model="key" style="width: 200px; height: 40px; margin-left: 10px;" @input="reStart" clearable prefix-icon="el-icon-search"></el-input>
                    <el-select v-model="datasetId" placeholder="关联知识库" style="width: 200px; margin-left: 10px;" @change="reStart" clearable>
                        <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="btn" @click="toCreate">添加微信</div>
            </div>
            <div class="pageInner">
                <div class="thVue flex">      
                    <div class="li" style="width: 250px; line-height: 40px; text-align: center; font-weight: 600;">微信名</div>   
                    <div class="li" style="width: 100px; line-height: 40px; text-align: center; font-weight: 600;">状态</div>          
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">AI客服描述</div>  
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">AI角色模型</div> 
                    <div class="li" style="flex: 1; line-height: 40px; text-align: center; font-weight: 600;">关联知识库</div>
                    <div class="li" style="width: 80px; line-height: 40px; text-align: center; font-weight: 600;">AI自动回复</div>
                    <div class="li" style="width: 160px; line-height: 40px; text-align: center; font-weight: 600;">操作</div>
                </div>
                <div class="tdContent">
                    <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                        <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                        <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                        <div style="color: #8F959E; padding-top: 15px">点击右上角的添加微信，绑定您的微信吧</div>
                    </div>
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li line-1" style="width: 250px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px" :title="item.wechatName">{{ item.wechatName }}</div>
                        <div class="li" style="width: 100px; line-height: 50px; text-align: center; ">
                            <span v-if="item.status===1" style="font-size: 13px; line-height: 50px;">在线</span>
                            <div v-if="item.status===0" style="font-size: 13px; line-height: 50px;">离线, <span style="font-size: 13px; font-weight: 600; line-height: 50px; cursor: pointer; color: #0147fd;" @click="toScan(item)">扫码登录</span></div>
                        </div> 
                        <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;" :title="item.name">{{ item.name }}</div>  
                        <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;" :title="item.promptName">{{ item.promptName }}</div>
                        <div class="li line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px;" :title="item.datasetName ?  item.datasetName : '暂未关联知识库'">{{ item.datasetName || "暂未关联知识库" }}</div>
                        <div class="li flex_center align_center" style="width: 80px; line-height: 50px; text-align: center; font-size: 13px;">
                            <div class="status" :class="{active: item.aiStatus===1}" @click="handleAiStatus(item)">
                                <div class="dot dot_left" v-if="item.aiStatus===0"></div>
                                <div class="dot dot_right" v-if="item.aiStatus===1"></div>
                            </div>
                        </div>
                        <div class="li flex_center align_center" style="width: 160px;">
                            <div class="oBtn" @click="handleEdit(item)">管理</div>
                            <div class="oBtn oBtn1" @click="handleDelete(item)">删除</div>
                        </div>  
                    </div>
                </div>
            </div>
            <div class="paginationVue flex_center align_center">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handlePageChange"></el-pagination>
            </div>
        </template>
       

        <createVue :dialogTableVisible="createDialog" ref="createRef" @beforeClose="createDialog=false" @callback="callback" @getList="reStart"></createVue>
        <editVue :dialogTableVisible="editDialog" ref="editRef" @beforeClose="editDialog=false" @callback="reStart"></editVue>
        <scanVue :dialogTableVisible="scanDialog" ref="scanRef"  @beforeClose="scanDialog=false" @callback="callback"></scanVue>
        <syncVue :dialogTableVisible="syncDialog" @beforeClose="syncDialog=false"  @reLogin="reLogin" ref="syncRef"></syncVue>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import createVue from './components/create.vue';
import editVue from './components/edit.vue'
import scanVue from './components/scan.vue'
import syncVue from "./components/sync.vue"
import { toast } from '@/common/tools';
export default {
    components: {
        createVue,
        editVue,
        scanVue,
        syncVue
    },
    data(){
        return{
            createDialog: false,
            editDialog: false,
            scanDialog: false,
            syncDialog: false,
            options: ["在线", "离线"],
            status: "",
            list: [],
            key: "",
            isEmpty: false,
            syncId: "",
            pageNum: 1,
            pageSize: 15,
            total: 0,
            id: "",
            datasetList: [],
            datasetId: ""
        }
    },
    created(){
        this.list = []
        this.getList()
        this.getRepositoryList()
    },

    watch: {
        loginoutRandom(){
            this.reStart()
        }
    },

    computed:{
        ...mapState({
            userPackageInfo: state=> state.userPackageInfo,
            loginoutRandom: state=> state.loginoutRandom,
        })
    },

    methods: {
        callback(){
            this.reStart()
            this.$refs.syncRef.setTime()
            this.$refs.syncRef.setTime1()
            this.syncDialog = true
        },

        reStart(){
            this.pageNum = 1; 
            this.list = []; 
            this.getList()
        },

        // 同步失败，重新扫码登录
        reLogin(){
            this.syncDialog = false
            this.scanDialog = true
            setTimeout(() => {
                this.$refs.scanRef.reLogin()
            }, 500); 
        },

        handlePageChange(val){
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        // 获取知识库列表
        getRepositoryList(){
            this.$post("/front/dataset/datasetList", {
                pageNum: 1,
                pageSize: 1000
            }).then(res=>{
                this.datasetList = res.data.obj.list
            })
        },

        // 创建微信
        toCreate(){
            if(this.userPackageInfo.wechatNum===0) return toast(1, "账号支持微信数不足，请联系客服充值")
            this.createDialog = true
            this.$refs.createRef.getPromptWord()
            this.$refs.createRef.getRepositoryList()
        },

        // 编辑微信
        handleEdit(item){
            this.editDialog = true
            this.$refs.editRef.getDetail(item.id)
            this.$refs.editRef.getPromptWord()
            this.$refs.editRef.getRepositoryList()
        },

        // 获取微信列表
        getList(){
            this.$post("/front/userWechat/searchWechatList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.status ? (this.status==="在线" ? 1 : 0) : "",
                wechatName: this.key,
                datasetId: this.datasetId
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                    this.isEmpty = this.list.length===0
                }
            })
        },

        // 扫码登录
        toScan(item){
            this.scanDialog = true
            this.$store.state.scanId = item.id
            setTimeout(() => {
                this.$refs.scanRef.reLogin()
            }, 200); 
        },

        // 删除微信客服
        handleDelete(item){
            if(this.id === item.id) return
            this.id = item.id
            this.$alert(`确认删除微信${item.wechatName}?`, '删除微信', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    this.id = ""
                    if(action==="confirm") {
                        //删除微信代码
                        this.$post("/front/userWechat/deleteWechat", {
                            ids: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.list = this.list.filter(o=>{
                                    return o.id != item.id
                                })
                                this.total-=1
                                this.isEmpty = this.list.length===0
                                this.$store.dispatch("getUserPackageInfo")
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        // AI自动回复开关
        handleAiStatus(item){
            this.$alert(`确认${item.aiStatus===1?"关闭":"开启"}${item.wechatName}的微信AI自动回复?`,  `${item.aiStatus===1?"关闭":"开启"}AI自动回复`, {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    if(action==="confirm") {
                        //AI自动回复开关代码
                        this.$post("/front/userWechat/updateWechat", {
                            name: item.name,
                            promptId: item.promptId,  //AI模板选择
                            openingRemarks: item.openingRemarks, //开场白
                            groupOpeningStatus: item.groupOpeningStatus ? 1 : 0,
                            groupOpeningRemarks: item.groupOpeningRemarks,
                            aiStatus: item.aiStatus ? 0 : 1,
                            openingStatus: item.openingStatus ? 1 : 0,
                            datasetId: item.datasetId,
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, item.aiStatus===0?"AI自动回复已开启":"AI自动回复已关闭")
                                this.list.forEach(o=>{
                                    if(o.id===item.id) o.aiStatus = item.aiStatus===1 ? 0 : 1 
                                }) 
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-icon-search:before) {
    color: #AAA !important;
}
:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
.page {
    width: 100%;
    height: 100%;
    padding: 10px 10px 0;
    .searchVue {
        width: 100%;
        height: 50px;
        .btn {
            width: 100px;
            height: 40px;
            border-radius: 4px;
            background: #0147fd;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
    }
    .paginationVue {
        width: 100%;
        height: 50px;
    }
    .pageInner {
        width: 100%;
        height: calc(100% - 100px);
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(90vh - 160px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #f5f5f5;
                span {
                    color: #333;
                    font-size: 13px;
                }
                .oBtn,.oBtn1 {
                    width: 46px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: #0147fd;
                    border-radius: 3px;
                    margin-left: 5px;
                    color: #fff;
                    font-size: 12px;
                    cursor: pointer;
                }
                .oBtn1 {
                    background: #d81e06;
                }
                .status {
                    width: 30px;
                    height: 15px;
                    background: #81868e;
                    border-radius: 10px;
                    margin-left: 5px;
                    position: relative;
                    cursor: pointer;
                    .dot {
                        width: 11px;
                        height: 11px;
                        background: #FFF;
                        border-radius: 50%;
                        position: absolute;
                    }
                    .dot_left {
                        left: 2px;
                        top: 2px;
                    }
                    .dot_right {
                        right: 2px;
                        top: 2px;
                    }  
                }
                .active {
                    background: #0147fd;
                }
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .pageInner::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

</style>